<template>
    <div class="eva">
        <div class="core-container">
            <div class="scroll-wrapper" ref="scroll">
                <div class="scroll-content">
                    <div class="evaContent" v-if="sellerInfo[0]">
                        <div class="evaLeft">
                            <div>{{sellerInfo[0].foodScore}}</div>
                            <p class="evaLeftP1">综合评分</p>
                            <p class="evaLeftP2">高于周边商家{{sellerInfo[0].rankRate}}%</p>
                        </div>
                        <div class="evaRight">
                            <div class="evaRighttop">
                                <p>服务态度</p>
                                <app-stars :score="sellerInfo[0].score" size="36" :mr="5"></app-stars>
                                <div class="evatext">3.9</div>
                            </div>
                            <div class="evaRighttop">
                                <p>服务态度</p>
                                <app-stars :score="sellerInfo[0].score" size="36" :mr="5"></app-stars>
                                <div class="evatext">4.0</div>
                            </div>
                            <div class="evaRightBottom">
                                <p>送达时间</p>
                                <div class="evaTime">44分钟</div>
                            </div>
                        </div>
                    </div>
                    <div class="evaContainer">
                        <div class="evaButton">
                            <van-button color="#00A0DC" size="small">全部{{ratingInfo.length}}</van-button>
                            <van-button class="btn" color="#CCECF8" size="small">满意{{satisfied}}</van-button>
                            <van-button color="#E9EBEC" size="small">不满意{{noSatisfied}}</van-button>
                        </div>
                        <div class="evatitle">
                            <i class="iconfont icon-dui"></i>
                            <p>只看有内容的评价</p>
                        </div>
                        <div class="evaInfo">
                            <div class="evaInfobar" v-for="(item,index) in ratingInfo" :key="index">
                                <div class="evaInfo-top">
                                    <img :src="item.avatar" alt="">
                                    <div class="namestar">
                                        <div class="cxss">
                                            <p>{{item.username}}</p>
                                            <div class="star">
                                                <app-stars :score="item.score" size="36" :mr="0.36"></app-stars>
                                                <span>{{item.deliveryTime}}分钟送达</span>
                                            </div>
                                        </div>
                                        <p class="starTime">{{timeFn(item.rateTime)}}</p>
                                    </div>
                                </div>
                                <div class="evaInfo-content">
                                    <p>{{item.text}}</p>
                                    <div class="evaInfo-content-title">
                                        <i class="iconfont icon-like-full"></i>
                                        <a v-for="(item1,index) in item.recommend" :key="index">{{item1}}</a>
                                    </div>
                                </div>
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
        </div>     
    </div>
</template>

<script>
import stars from "../../components/stars/stars"
import {mapState} from "vuex"
import BScroll from '@better-scroll/core'
import Vue from 'vue';
import { Button } from 'vant';
Vue.use(Button);
export default {
    name:"evaluate",
    methods: {
        init() {
            this.bs = new BScroll(this.$refs.scroll, {
            probeType: 3,
            click: true
            })
        },
    },
    computed:{
        ...mapState(["ratingInfo","sellerInfo"]),
        satisfied(){
            return this.ratingInfo.filter(item=>item.score>=4).length
        },
        noSatisfied(){
            return this.ratingInfo.filter(item=>item.score<4).length
        },
        timeFn(){
            return function(time){
                function times(timestamp) {
                    var date = new Date(timestamp);
                    var Y = date.getFullYear() + '-';
                    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
                    var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
                    return Y+M+D;
                }
                return times(time)
            }
        }
    },
    components:{
        "app-stars":stars
    },
    mounted() {
        this.init();
    }
}
</script>

<style lang="less" scoped>
.eva{
    background-color:#F3F5F7;
    .evaContent{
        display:flex;
        padding: 0.36rem 0;
        margin-bottom: 0.32rem;
        border-bottom: 0.01rem solid #E7E8E9;
        background-color:white;
        .evaLeft{
            display:flex;
            flex-direction:column;
            width: 2.75rem;
            align-items: center;
            justify-content:center;
            div{
                font-size: 0.48rem;
                color: rgb(255, 153, 0);
                line-height: 0.56rem;
            }
            .evaLeftP1{
                font-size: 0.24rem;
                color: rgb(7, 17, 27);
                line-height: 0.24rem;
                margin-top: 0.12rem;
            }
            .evaLeftP2{
                font-size: 0.2rem;
                color: rgba(7, 17, 27, 0.267);
                line-height: 0.2rem;
                margin: 0.16rem 0 0.12rem;
            }
        }
        .evaRight{
            box-sizing: border-box;
            width: 4.74rem;
            display: flex;
            flex-direction:column;
            padding: 0 0.48rem;
            justify-content:center;
            .evaRighttop{
                display: flex;
                align-items: center;
                margin-bottom: 0.16rem;
                p{
                    font-size: 0.24rem;
                    color: rgb(7, 17, 27);
                    line-height: 0.36rem;
                }
                .evarightImg{
                    margin: 0 0.24rem;
                    display: flex;
                    justify-content:space-between;
                    img{
                        padding-right: 0.1rem;
                        width: 0.30rem;
                        &:nth-child(5){
                            padding-right: 0;
                        }
                    }
                }
                .evatext{
                    font-size: 0.24rem;
                    color: rgb(255, 153, 0);
                    line-height: 0.36rem;
                }
            }
            .evaRightBottom{
                display: flex;
                p{
                    font-size: 0.24rem;
                    color: rgb(7, 17, 27);
                    line-height: 0.36rem;
                }
                .evaTime{
                    font-size: 0.24rem;
                    color: rgb(147, 153, 159);
                    line-height: 0.36rem;
                    margin-left: 0.24rem;
                }
            }
        }
    }

    .evaContainer{
        background-color:white;
        border-top: 0.01rem solid #E7E8E9;
        .evaButton{
            display: flex;
            padding: 0.36rem 0;
            margin: 0 0.36rem;
            border-bottom: 0.01rem solid #ccc;
            .btn{
                margin: 0 0.2rem;
            }
        }
        .evatitle{
            padding: 0.36rem;
            border-bottom: 0.01rem solid #ccc;
            color:rgb(150, 143, 143);
            display: flex;
            align-items: center;
            i{
                margin-right: 0.1rem;
            }
        }
        .evaInfo{
            .evaInfobar{
                padding: 0.36rem 0;
                margin: 0 0.36rem;
                border-bottom: 0.01rem solid #ccc;
                .evaInfo-top{
                    display: flex; 
                    >img{
                        width: 0.56rem;
                        height: 0.56rem;
                        border-radius:50%;
                        margin-right: 0.24rem;
                    }
                    .namestar{
                        display: flex;
                        align-items: center;
                        justify-content:space-between;
                        width: 100%;
                        .cxss{
                            display: flex;
                            flex-direction:column;
                            p{
                                font-size: 0.2rem;
                                color: rgb(7, 17, 27);
                                line-height: 0.24ren;
                            }
                            .star{
                                display: flex;
                                margin: 0.08rem 0 0.12rem;
                                .starImg{
                                    margin-right: 0.06rem;
                                    img{
                                        width: 0.2rem;
                                        margin-right: 0.06rem;
                                    }
                                }
                                span{
                                    font-style: 0.2rem;
                                    font-weight: 200;
                                    color: rgb(147,153,159);
                                    line-height: 0.24rem;
                                }
                            }
                        }
                        .starTime{
                            font-size: 0.2rem;
                            font-weight: 200;
                            color: rgb(147,153,159);
                            line-height: 0.24rem;
                        }
                    }
                    
                }
                .evaInfo-content{
                    display:flex;
                    flex-direction:column;
                    margin-left: 0.8rem;
                    p{
                        font-size: 0.24rem;
                        color: rgb(7, 17, 27);
                        line-height: 0.36rem;
                    }
                    .evaInfo-content-title{
                        display:flex;
                        align-items: center;
                        margin-top: 0.16rem;
                        i{
                            font-size: 0.24rem;
                            color: rgb(0, 160, 220);
                            line-height: 0.32;
                        }
                        a{
                            display:inline-block;
                            padding: 0 0.16rem;
                            margin-left: 0.16rem;
                            border: 0.01rem solid #ccc;
                            border-radius: 0.02rem;
                            background-color:rgb(255, 255, 255);
                            font-size: 0.18rem;
                            color:rgb(147, 153, 159);
                            line-height: 0.32rem;
                        }
                    }

                }
            }
        }
    }
    .core-container{
        .scroll-wrapper{
            height: 8.88rem;
            position: relative;
            overflow: hidden;
        }
    }
    
}   
</style>